<template>
    <div id="abnormal">
        <div class="title">设备异常</div>
        <div class="content">
            <div class="top">
                <div>
                    <div class="text-title">设备正常率</div>
                    <div class="text-value">{{ deviceData.onlineNumber == 0 ? '0%' : (deviceData.normalNumber
                        / deviceData.onlineNumber * 100).toFixed(0) + '%' }}
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div>
                    <div>
                        <div class="text-title icon_5">在线总数</div>
                        <div class="text-value">{{ deviceData.normalNumber }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div>
                    <div>
                        <div class="text-title icon_6">正常</div>
                        <div class="text-value">{{ deviceData.normalNumber }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div>
                    <div>
                        <div class="text-title icon_6">告警</div>
                        <div v-if="deviceData.alarmNumber > 0" style="cursor: pointer" @click="jumpPage">
                            <div class="text-value">{{
                                deviceData.alarmNumber }}
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                        <div class="text-value" v-else>{{ deviceData.alarmNumber }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
  
<script>
import device from '@/assets/images/device.png';
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {
    props: {
        deviceData: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            deviceImg: device,
        }
    },
    mounted() {
    },
    methods: {
        jumpPage() {
            this.$router.push({
                path: 'log/wigLog',
                query: { onlineStatus: '1' },
            });
        },
    }

}
</script>
  
<style lang='scss' scoped>
@import './css/index.scss';
</style>